<template>
  <common-modal
    ref="modalRef"
    v-bind="attrs"
    @sure="search"
    @cancel="handleCancel"
    @before-close="reset"
    @open="handleOpen"
  >
    <el-form
      label-width="140px"
      :rules="rules"
      ref="formRef"
      :inline="false"
      :model="formData"
    >
      <el-form-item label="选择角色：" prop="rid">
        <el-select
          style="width: 100%"
          placeholder="请选择角色"
          @change="handleRoleChange"
          v-model="formData.rid"
        >
          <el-option
            v-for="item in allRoleList"
            :label="item.rname"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="showSubject" label="选择上级归属者：" prop="lastRid">
        <el-select
          style="width: 100%"
          placeholder="请选择上级归属者"
          v-model="formData.lastRid"
        >
          <el-option
            v-for="item in subjectList"
            :label="item.rname"
            :value="item.id"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="账户名称：" prop="username">
        <el-input
          v-model="formData.username"
          placeholder="请输入账户名称"
          clearable
        />
      </el-form-item>
      <el-form-item label="归属者：" prop="affiliationName">
        <el-input
          v-model="formData.affiliationName"
          placeholder="请输入归属者姓名"
          clearable
        />
      </el-form-item>

      <el-form-item label="密码：" prop="password">
        <el-input
          v-model="formData.password"
          type="password"
          placeholder="请输入密码，未填写，默认123456"
          clearable
          show-password
        />
      </el-form-item>
      <el-form-item label="状态：" prop="state">
        <el-radio-group v-model="formData.state">
          <el-radio :label="0">禁用</el-radio>
          <el-radio :label="1">正常</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
  </common-modal>
</template>
<script>
export default {
  inheritAttrs: false,
};
</script>
<script setup>
import { reactive, useAttrs, ref, onMounted, computed, nextTick } from "vue";
import commonModal from "@/components/commonModal.vue";
import useForm from "@/hooks/useForm";
import { RoleQueryList, GetRoleSubjectList } from "@/apis/role";
import { UserSave } from "@/apis/user";
import { ElMessage } from "element-plus";
const props = defineProps({
  type: {
    type: String,
    default: "add",
  },
  curForm: {
    type: [Object, String],
    default: () => ({}),
  },
});
const attrs = useAttrs();
const formData = reactive({
  rid: "",
  lastRid: "",
  id: "",
  password: "",
  state: "",
  affiliationName: "",
  username: "",
});
const allRoleList = ref([]);
const modalRef = ref(null);
// 确定
const emits = defineEmits(["success"]);
const handleSure = async () => {
  let params = { ...formData }
  if (props.type === 'add') {
    if (!formData.password) params.password = '123456'
  }
  if (!showSubject) {
    delete params.lastRid
  }
  await UserSave({ ...params });
  ElMessage.success({
    message: "操作成功",
    type: "success",
  });
  emits("success");
  handleCancel();
};
const { formRef, search, reset } = useForm(handleSure);
const rules = {
  rid: [{ required: true, message: "请选择角色" }],
  username: [{ required: true, message: "请输入账户名称" }],
  affiliationName: [{ required: true, message: "请输入归属者姓名" }],
  state: [{ required: true, message: "请选择状态" }],
  lastRid: [{ required: true, message: "请选择上级归属者" }],
};

// 取消 关闭弹窗
const handleCancel = () => {
  modalRef.value?.close();
};
onMounted(() => {
  // 查询所有的角色
  RoleQueryList().then((list) => {
    allRoleList.value = list;
  });
});
// 打开弹窗
const handleOpen = () => {
  const { type, curForm } = props;
  if (type === "add") {
    Object.assign(formData, {
      rid: "",
      id: "",
      password: "",
      state: "",
      affiliationName: "",
      username: "",
    });
  } else {
    Object.assign(formData, curForm);
    if (curForm.lastRid) {
      handleRoleChange()
    }
  }
};
const handleRoleChange = async e => {
  console.log('e: ', e);
  await nextTick()
  if (showSubject.value) {
    GetRoleSubjectList().then((res) => {
      console.log('res: ', res);
      subjectList.value = res
    })
  }
}
const showSubject = computed(() => {
  const { rid } = formData
  if (!rid) return false
  const selectItem = allRoleList.value.find(v => v.id == rid)
  return selectItem ? selectItem.type === '投手' : false
})
const subjectList = ref([])

</script>
